<ui:composition 
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:c="http://java.sun.com/jsp/jstl/core"
    xmlns:composite="http://java.sun.com/jsf/composite">
    <composite:interface>
        <composite:attribute name="label"/>
        <composite:attribute name="value"/>
        <composite:attribute name="rows"/>
        <composite:attribute name="cols"/>
        <composite:attribute name="requiredMessage"/>
        <composite:attribute name="required"/>
    </composite:interface>

    <composite:implementation>           
        <h:outputLabel for="textarea" value="#{cc.attrs.label}:" styleClass="ds-label"/>
		<div class="ds-field" style="display:inline-block;" >
		    <span id="#{cc.clientId}:toolbar" class="ui-widget-header ui-corner-all ds-rte-toolbar ui-widget-content ui-corner-all ds-field" style="width:95%">			
					<input type="checkbox" id="#{cc.clientId}:bold" /><label for="#{cc.clientId}:bold"><b>B</b></label>
					<input type="checkbox" id="#{cc.clientId}:italic" /><label for="#{cc.clientId}:italic"><i>I</i></label>
					<input type="checkbox" id="#{cc.clientId}:underline" /><label for="#{cc.clientId}:underline"><u>U</u></label>
					<input type="checkbox" id="#{cc.clientId}:strike" /><label for="#{cc.clientId}:strike"><strike>S</strike></label>
					<input type="checkbox" id="#{cc.clientId}:source" /><label for="#{cc.clientId}:source">Source</label>
						
				</span>
        <h:inputTextarea value="#{cc.attrs.value}"
                         title="#{cc.attrs.label}"
                         id="textarea"
                         styleClass="ui-widget-content ui-corner-all ds-field"                         
                         style="width:98%;height:200px;"						 
                         requiredMessage="#{cc.attrs.requiredMessage}"
                         required="#{cc.attrs.required}"/>
          <iframe id="#{cc.clientId}:iframe" style="width:98%;height:200px;display:none" class="ds-rich-text-editor-frame ui-widget-content ui-corner-all ds-field"></iframe>						 
        </div>
       			      		 
        <h:message id="errorMessage" for="inputField" errorClass="ui-state-error ui-state-error-text ds-message" />				
        <script type="text/javascript">
		   deltaset.decorateIfError('#{cc.clientId}');
		   jQuery(document).ready(function(){
		       jQuery().deltasetRichEditor('#{cc.clientId}');
	       });
		</script>
		<style>
	.ds-rte-toolbar {
		/*padding: 10px 4px;*/
	}
	</style>
    </composite:implementation>
</ui:composition>